<template>
    <div id="login_back" :style="{backgroundImage:'url('+background_image+')'}">
        <div :id="pc ? 'from_back_pc' : 'from_back_mobile'">
            <div id="from">
                <div align="center">
                    <p style="font-size:30px;padding:10px;color:#E6A23C">{{adress_data.title}}</p>
                    <p style="font-size:15px;padding:5px;color:#C0C4CC;">{{adress_data.adress}}</p>
                </div>
                <el-form ref="form" :model="form" label-width="70px" size="small" label-position="left">
                    <el-form-item label="用户名">
                        <el-input v-model="form.user_name" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="用户邮箱">
                        <el-input v-model="form.user_email" placeholder="请输入用户邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.user_password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="form.password" placeholder="请再次输入密码" show-password></el-input>
                    </el-form-item>
                    <el-button type="danger" @click="onSubmit" style="width:100%">找回密码</el-button>
                </el-form>
                <div align="right" style="padding: 10px;">
                    <el-button type="text" @click="$router.push('/register')">注册</el-button>
                    <el-button type="text" @click="$router.push('/')">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["pc"],
    data() {
        return {
            background_image: 'https://images.unsplash.com/photo-1630353958876-d65ded6eacda?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80',
            adress_data: {
                title: "找回密码",
                adress: "请根据步骤进行"
            },
            form: {
                user_name: "",
                user_email: "",
                user_password: "",
                password: ""
            }
        };
    },
    methods: {
        onSubmit() {
            this.$message.success("登录成功，即将为您跳转");
            if (sessionStorage.getItem("aside_menu") == null) {
                var menu = [];
                sessionStorage.setItem("aside_menu", JSON.stringify(menu));
            }
            setTimeout(() => {
                this.$router.push("/home");
            }, 1500);
        }
    }
};
</script>

<style scoped>
#login_back {
    width: 100%;
    height: 100vh;
    background-size: cover;
    position: relative;
}

#from_back_pc {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 450px;
    height: 400px;
    background: rgba(255, 255, 255, 0);
}

#from_back_mobile {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 20px;
    margin: auto;
    width: 90%;
    height: 400px;
    background: rgba(255, 255, 255, 0);
}

#from {
    width: 100%;
    height: 100%;
    margin-left: 0px;
    background-color: #ffffffe1;
    padding: 10px;
    border-radius: 5px;
}

#from p+p{
    color: #1de2d1;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #1de2d1;
    animation: typing 5s steps(25) infinite;
}

@keyframes typing {
    0%{
        width: 0ch;
    }
    75%{
        width: 15ch;
    }
    100%{
        width: 0ch;
    }
}
</style>